<template>
	<i
		class="wind-icon"
		:class="classes"
		:style="iconStyle"
		@click="onIconClick"
	></i>
</template>
<script>
/**
 * Icon by shang 2020/6/30
 * @desc Icon 图标
 * @params [String] type 内置样式
 * {app-logo:项目log}
 */
import ICON_URL from '../../js/config/icon_url'
export default {
	name: 'LoginForm',
	props: {
		imgUrl: String,
		width: String,
		height: String,
		type: String,
		size: {
			type: String,
			default: 'normal'
		},
		stop: Boolean,
		pointer: Boolean,
		verticalAlign: Boolean,
		rowInfo: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	computed: {
		iconStyle () {
			const imgUrl = this.$fxUtils.isDef(this.type) ? ICON_URL[this.type] : this.imgUrl
			return {
				width: this.width,
				height: this.height,
				backgroundImage: `url(${imgUrl})`
			}
		},
		classes () {
			return [`wind-icon__size-${this.size}`, {
				'is-pointer': this.pointer,
				'is-vertical-align': this.verticalAlign
			}]
		}
	},
	methods: {
		onIconClick (event) {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', this.rowInfo)
		}
	}
}
</script>
<style lang="stylus" scoped>
.wind-icon {
	display:inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 20px;
	height: 20px;
	&__size-mini {
		width: 16px;
		height: 16px;
	}
	&.is-pointer {
		cursor: pointer
	}
	&.is-vertical-align {
		vertical-align: middle;
	}
}
</style>
